<script setup lang="ts">
import useFlv from "@visual/utils/useFlv";
import { ref, computed, watch, nextTick, onUnmounted, onMounted } from "vue";
defineOptions({
  name: "monitor"
});

const props = defineProps({
  cameraItem: {
    type: Object,
    required: true,
    default: () => {}
  }
});
const done = defineModel("done");
const cameraUrl = ref("");
const cameraName = ref("");
const flvRef = ref();
const { getFlv, videoClick, destoryVideo } = useFlv({ videoRef: flvRef, cameraUrl: cameraUrl, options: { height: "75%" } });
watch(
  () => props.cameraItem,
  val => {
    if (val) {
      const { remark, name } = val;
      cameraUrl.value = remark;
      // cameraUrl.value = "/data/ifp/file/file/1.mp4";

      cameraName.value = name;

      getFlv();
      nextTick(() => {
        done.value = true;
      });
    }
  },
  { immediate: true }
);

onUnmounted(() => {
  destoryVideo();
});
</script>

<template>
  <div class="monitor-content">
    <!-- <h1 class="name">{{ cameraName }}</h1> -->
    <div v-show="cameraUrl" ref="flvRef" />
    <px-empty v-show="!cameraUrl" :image-size="200" />
  </div>
</template>

<style lang="scss" scoped>
.monitor-content {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;

  .name {
    position: absolute;
    top: 16px;
    left: 16px;
  }
}
</style>
